<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <legend>登录页面</legend>
                <div class="form-group">
                    <label for="">用户名</label>
                    <input type="text" class="form-control" id="userId" placeholder="Input field">
                </div>
                <div class="form-group">
                    <label for="">用户密码</label>
                    <input type="text" class="form-control" id="userPwd" placeholder="Input field">
                </div>
                <button type="submit" id="loginBtn" class="btn btn-primary">登录</button>
            </div>
        </div>
    </div>
    <script>
        $('#loginBtn').on('click',() => {
            var userId = $('#userId').val(),
                userPwd = $('#userPwd').val()
            if(!userId){
                alert('用户名不能为空')
                return ;
            }
            if(!userPwd){
                alert('密码不能为空')
                return ;
            }

            $.ajax({
                url : '/user/login',
                method : 'post',
                data : {userId,userPwd},
                success : function (data) {
                    if(data.code === 200){
                        alert('登录成功')
                    }else{
                        alert(data.message)
                    }
                },
                error : function (e) {
                    alert('登录错误，请重试')
                    console.log(e)
                }
            })
        })
    </script>
</body>
</html>